<template>
	<view class="page">
		<view id="head" style="background: none;">
			<view class="back" @click="$back()">返回</view>
		</view>

		<template v-if="formData">

			<view class="h1">
				{{formData.meetingName}}
			</view>

			<view class="table">
				<view class="tabItem">
					<view class="item color">评吸目的</view>
					<view class="item">{{formData.meetingSigninRep.objective}}</view>
				</view>
				<view class="tabItem">
					<view class="item color">检验组织部门</view>
					<view class="item">{{formData.meetingSigninRep.orgName}}</view>
				</view>
				<view class="tabItem">
					<view class="item color">会议申请人</view>
					<view class="item">{{formData.meetingSigninRep.host}}</view>
				</view>
				<view class="tabItem">
					<view class="item color">评吸时间</view>
					<view class="item">{{formData.meetingSigninRep.meetingTime}}</view>
				</view>
				<view class="tabItem">
					<view class="item color">评吸地点</view>
					<view class="item">{{formData.meetingSigninRep.location}}</view>
				</view>
				<view class="tabItem">
					<view class="item color">样品种类</view>
					<view class="item">单料烟</view>
					<view class="item" style="flex: 1.6;">成品烟</view>
				</view>
				<view class="tabItem">
					<view class="item color">评吸数量(支)</view>
					<view class="item">{{formData.meetingSigninRep.unblendedAmout || '————'}}</view>
					<view class="item" style="flex: 1.6;">{{formData.meetingSigninRep.perfectAmount || '————'}}</view>
				</view>
			</view>

			<view class="tip">请您点击签到开始评吸.....</view>
			<view class="btns">
				<view class="btn" @click="signIn">签到</view>

			</view>

		</template>

		<u-modal :show="noSignTip" width="300px" title="提示" content='暂无可签到会议' @confirm="colseNoSignTip" @close="colseNoSignTip"></u-modal>
		
		<zero-loading v-if="isLoading" :mask="true"></zero-loading>
	</view>
</template>

<script>
	import {
		smokeMeetingUser,
		getSmokes,
		getOngoing
	} from "@/api/signIn.js"
	export default {
		components: {

		},
		data() {
			return {
				formData: {
					meetingSigninRep:{}
				},
				noSignTip: false, //没有签到的提示
				timer: null, //定时轮询
				firstShow: true, //是第一次请求没请求到会议

			}
		},
		methods: {
			// getData() {

			// 	getOngoing().then(res => {
			// 		if (res.code == 200) {
			// 			this.formData = res.data;
			// 			if(!this.formData.meetingSigninRep) { this.formData.meetingSigninRep = {} }
			// 			console.log(this.formData )
			// 			if (this.formData.userSiginStatus) {
			// 				uni.showToast({
			// 					title: '已签到',
			// 					icon: 'none',
			// 					mask: true
			// 				})
			// 				setTimeout(() => {
			// 					this.goTo()
			// 				}, 800)

			// 			}
			// 		}
			// 	})

			// },
			async getData(params={}) {
				const res = await getOngoing(params)
				console.log("RES", res)
				if (res.code == 200) {
					this.formData = res.data;
					if(this.firstShow&&!this.formData.id) {
						this.firstShow = false
						this.noSignTip = true
					}
					
					if(!this.formData.meetingSigninRep) { //没有请求到会议内容
						this.formData.meetingSigninRep = {}
						
						this.timer = setTimeout(()=>{
							this.getData({loading: false})
						}, 5 * 1000)
						
					} else {
						if(this.timer) {
							clearTimeout(this.timer)
						}
					}
					if (this.formData.userSiginStatus) {
						uni.showToast({
							title: '已签到',
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							this.goTo()
						}, 800)
					}
				}

			},
			goTo() {
				uni.redirectTo({
					url: '/pages/tPoint/tPoint'
				});
			},
			signIn() {
				if(this.timer) {
					clearTimeout(this.timer)
				}
				if(!this.formData.id) {
					this.noSignTip = true
					return;
				}
				
				smokeMeetingUser({
					meetingId: this.formData.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '签到成功',
							icon: 'none',
							mask: true
						})
						setTimeout(() => {
							this.goTo()
						}, 800)
					}
				})
			},
			colseNoSignTip() {
				this.noSignTip = false
			}
		},
		created() {
			this.getData()
		},
		beforeDestroy() {
			if(this.timer) {
				clearTimeout(this.timer)
			}
			clearTimeout(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;

			&:hover {
				opacity: 0.5;
			}

			// &:last-child{
			// 		background-image: url(../../../static/Rectangle113.png);
			// 		margin-left: 41rpx;
			// }
		}
	}

	.tip {
		height: 17rpx;
		font-size: 11rpx;
		font-weight: 400;
		color: #25955F;
		line-height: 17rpx;
		text-align: center;
		margin: 15rpx 0;
	}

	#main {
		width: 678rpx;
		margin: 0 auto;
	}

	.h1 {
		font-size: 18rpx;
		font-weight: 600;
		line-height: 21rpx;
		color: #25955F;
		text-align: center;
		margin: 15.37rpx 0;
	}

	.table {
		width: 678rpx;
		margin: 0 auto;
		margin-top: 15.92rpx;



		.tabItem {
			height: 30rpx;
			background: #F8F8F8;
			border-radius: 3rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			margin-top: 10rpx;

			font-size: 11rpx;


			.item {
				font-weight: 400;
				color: #333333;
				flex: 1;
				text-align: left;

				&:first-child {
					flex: none;
					width: 66rpx;
					margin-right: 79rpx;
				}
			}

			.color {
				font-weight: bold;
				color: #6C9789;
			}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				margin: 0 140rpx;

				.i {
					width: 57rpx;
					height: 27rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					opacity: 1;
					font-weight: 400;
					color: #999999;
					font-size: 11rpx;
					line-height: 27rpx;
					text-align: center;
					overflow: hidden;
				}

				.on {
					border: 1rpx solid #27B186;
				}
			}

			.btn {
				width: 57rpx;
				height: 27rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				line-height: 27rpx;
				text-align: center;
				font-size: 11rpx;
				color: #999999;
			}

			.btnOn {
				background: linear-gradient(132deg, #68DC8F 0%, #27B186 100%);
				color: #FFFFFF;
			}
		}

	}
</style>